import React from 'react';
import { Chart, Tooltip, Geom, Axis } from 'bizcharts';
import DataSet from '@antv/data-set';
// import Slider from 'bizcharts-plugin-slider';
import autoHeight from '../autoHeight';

@autoHeight()
export default class Line extends React.Component {
  render() {
    const {
      /*  title,
      height = 400,
      padding = [60, 20, 40, 40], */
      titleMap = {
        y1: 'y1',
        y2: 'y2'
      },
      //  borderWidth = 2,
      data = []
    } = this.props;
    const cols = {
      y: {
        min: 0
      },
      x: {
        range: [0, 1]
      }
    };
    const ds = new DataSet({
      state: {
        start: data[0] && data[0].x,
        end: data[data.length - 1] && data[data.length - 1].x
      }
    });

    const dv = ds.createView();
    dv.source(data)
      .transform({
        type: 'filter',
        callback: obj => {
          const date = obj.x;
          return date <= ds.state.end && date >= ds.state.start;
        }
      })
      .transform({
        type: 'map',
        callback(row) {
          const newRow = { ...row };
          newRow[titleMap.y1] = row.y1;
          return newRow;
        }
      })
      .transform({
        type: 'fold',
        fields: [titleMap.y1, titleMap.y2], // 展开字段集
        key: 'key', // key字段
        value: 'value' // value字段
      });
    return (
      <div>
        <Chart height={400} data={data} scale={cols} forceFit>
          <Axis name="year" />
          <Axis name="value" />
          <Tooltip
            crosshairs={{
              type: 'y'
            }}
          />
          <Geom type="line" position="year*value" size={2} />
          <Geom
            type="point"
            position="year*value"
            size={4}
            shape={'circle'}
            style={{
              stroke: '#fff',
              lineWidth: 1
            }}
          />
        </Chart>
      </div>
    );
  }
}
